<!-- Get Started Content -->
<!-- Author: Edwin -->
<template>
  <div class="right" style="width: 605px;"
       v-loading="!nowInfo.id"
       :element-loading-text="$t('loading')"
       element-loading-spinner="el-icon-loading"
       element-loading-background="#ffffffcc">
    <div class="content">
      <div class="content-header" style="height: 130px;">
        <div class="content-header-title">
          <div class="content-header-title-text" style="font-size: 22px;">
            {{ inteInfo.name }}
          </div>
          <!--<div class="content-header-title-icon"
               v-if="nowInfo.webUrl">
            <i :style="{color:themeColor}"
               class="el-icon-question"
               @click="openDocument(nowInfo.webUrl)"></i>
          </div>-->
        </div>
        <div class="content-header-tips" style="font-size: 16px;font-weight: 500;">
          <span v-html="inteInfo.describe"></span>
        </div>
      </div>
      <div class="content-body scroll-css" style="padding: 0px;">
        <Integrations :showInter=showInter></Integrations>
      </div>
    </div>
  </div>
</template>

<script>
import Integrations from '@/views/modules/mspbots/Integrations/index'

export default {
  components: { Integrations },
  props: {
    getStartedDialogStatus: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      baseLeftUrl: this.$ossLink + '/app/getStarted/get_started_tips_img.png',
      nowSteps: 0,
      startList: [],
      loadingForNextBtn: false,
      showInter: true,
      inteInfo: {
        name: 'Integration',
        describe: 'To enable this function, please setup following integration first'
      }
    }
  },
  watch: {
    getStartedDialogStatus (val) {
      if (val) {
        this.nowSteps = this.$store.state.GetStarted.steps
        this.$nextTick(() => {
          this.getStartedList()
          if (this.$store.state.GetStarted.steps === 1 && this.startList[this.nowSteps].status === 'undone') {
            this.timer = setInterval(() => {
              this.getStartedList()
            }, 10000)
          }
        })
      } else {
        clearInterval(this.timer)
        this.$store.state.GetStarted.dialogStatus = false
      }
    }
  },
  computed: {
    nowInfo () {
      if (this.startList && this.startList.length && this.startList.length > 0) {
        return this.startList[this.nowSteps]
      } else {
        return {
          imageUrl: null,
          name: null,
          webUrl: null,
          describe: null,
          status: null,
          componentName: null
        }
      }
    },
    themeColor () {
      // return this.$store.state.app.themeColor
      return '#17B3A3'
    },
    disabledForNextBtn () {
      if (this.startList && this.startList.length && this.startList.length > 0) {
        if (this.startList[this.nowSteps].componentName === 'SetupPsaApiConnectors' && this.startList[this.nowSteps].status === 'undone') {
          return true
        } else {
          return false
        }
      }
    }
  },
  created () {
    this.getStartedList()
    if (this.$getQuery('step') || this.$getQuery('step') === 0) {
      this.nowSteps = this.$getQuery('step') * 1
    }
  },
  methods: {
    getStartedList () {
      const params = {
        type: 'bots' // bots, attendance, nextTickets';
      }
      this.$interface.getStarted.getStartedListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.code)
          }
          if (res.data && res.data.length && res.data.length > 0) {
            this.startList = res.data
            this.$store.state.GetStarted.configList = res.data
          } else {
            // this.$message.error('No Data.')
            this.$emit('closeThisDialog')
          }
        })
        .catch(() => {
          this.$emit('closeThisDialog')
        })
    },
    openDialog () {
      this.$emit('openThisDialog')
    },
    updateStepsStatus (id, stepsTo = true) {
      this.loadingForNextBtn = true
      if (this.nowInfo.sort !== 3) {
        if (stepsTo && this.nowInfo.status === 'done') {
          this.nowSteps++
          this.loadingForNextBtn = false
          return false
        }
        if (!stepsTo && this.nowInfo.status === 'done') {
          this.loadingForNextBtn = false
          return false
        }
      }
      const params = {
        id: id,
        status: 'done'
      }
      this.$interface.getStarted.updateStepsStatusApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.code)
          }
          if (stepsTo) {
            this.nowSteps++
          }
          this.loadingForNextBtn = false
          this.getStartedList()
        })
        .catch(() => {
          if (stepsTo) {
            this.nowSteps++
          }
          this.loadingForNextBtn = false
        })
    },
    nextSteps (type, id) {
      if (this.nowSteps === (this.startList.length - 1)) {
        if (this.nowInfo.componentName === 'BestPracticeTraining') {
          this.updateStepsStatus(id, false)
        }
        this.$emit('closeThisDialog')
        return false
      }
      if (type === 'skip') {
        this.nowSteps++
        return false
      } else {
        // this.nowSteps++
        if (this.nowInfo.componentName === 'InstallMSPbotsTeamsAPP' || this.nowInfo.componentName === 'AddToGlobalPolicy' || this.nowInfo.componentName === 'AddExtraAdmin' || this.nowInfo.componentName === 'BestPracticeTraining') {
          this.updateStepsStatus(id)
        } else {
          this.nowSteps++
        }
      }
    },
    backSteps () {
      if (this.nowSteps === 0) {
        return false
      }
      this.nowSteps--
    },
    openDocument (url) {
      window.open(url, '_blank')
    },
    navToSteps (item, index) {
      if (this.nowInfo.componentName === 'SetupPsaApiConnectors' && this.nowInfo.status === 'undone') {
        this.$message.error(this.$t('custom.tips.getStartedSkipSteps'))
        return false
      }
      if (index === this.nowSteps) {
        return false
      }
      if (this.nowInfo.componentName === 'SetupPsaApiConnectors' && this.nowInfo.status === 'undone') {
        return false
      }
      this.nowSteps = index
    },
    closeThisDialog () {
      this.$emit('closeThisDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
